<script setup lang="ts">
import dayjs from 'dayjs'
import ProjectInfo from './components/projectInfo.vue'
import centerMap from './components/centerMap.vue'
import statisticsChart from './components/statisticsChart.vue'
import trendChart from './components/trendChart.vue'
import { useUserStore } from '@fl/store/modules/user'

const userStore = useUserStore()
const outAreaCode = ref<string>(userStore.getOrgInfo?.enterpriseAccount ?? '')
const screen = ref()
const currentScreen = ref<string>('CityScreen')
const isFullScreen = ref<boolean>(false)
const timer = ref<any>(null)
const currentTime = ref<string>('')
const areaCode = ref<string>('') // 当前区域code，武汉市420100时为空

const mapList = ref<any>()
const canShowCity = ref<boolean>(true)

onMounted(() => {
    // 区住更局仅能看到对应区下的街道
    if (outAreaCode.value) {
        console.log('outAreaCode.value', outAreaCode.value)
        // 简单校验code，例420102为江岸区、通过，10000则不通过
        if (outAreaCode.value.startsWith('4201') && outAreaCode.value !== '4201') {
            canShowCity.value = false
            currentScreen.value = 'DistrictScreen'
            areaCode.value = outAreaCode.value
        }
        else {
            outAreaCode.value = ''
        }
    }
})

// 顶部切换
function handleScreenChange(val, id) {
    if (!canShowCity.value)
        return
    currentScreen.value = val
    areaCode.value = id
}

// 全屏
function fullScreenChangeHandler() {
    isFullScreen.value = document.fullscreenElement !== null
}
async function handleFullScreen() {
    // console.log('handleFullScreen', isFullScreen.value)
    if (isFullScreen.value) {
        isFullScreen.value = true
        await document.exitFullscreen()
        // this.handleBack()
    }
    else {
        await screen.value.requestFullscreen()
    }
}

function handleDistrictChange(val) {
    // console.log('index areaCode', val)
    areaCode.value = val
    if (!val) {
        currentScreen.value = 'CityScreen'
    }
    else {
        currentScreen.value = 'DistrictScreen'
    }
}

function mapListChange(arr) {
    // console.log('mapListChange', arr)
    mapList.value = arr
}

// 定时器
function mySetInterval(fn, delay) {
    let timer = null
    function inside() {
        clearTimeout(timer)
        fn()
        timer = setTimeout(inside, delay)
    }
    timer = setTimeout(inside, delay)
    return {
        clear() {
            clearTimeout(timer)
        },
    }
}
// 清除定时器
function myClearInterval(flagTimer) {
    flagTimer.clear()
}
function updateTime() {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}

onMounted(() => {
    document.addEventListener('fullscreenchange', fullScreenChangeHandler)
    timer.value = mySetInterval(updateTime, 1000)
})

onUnmounted(() => {
    document.removeEventListener('fullscreenchange', fullScreenChangeHandler)
    myClearInterval(timer.value)
})
</script>

<template>
    <div ref="screen"
         class="screen"
    >
        <div class="screen-header">
            <div style="font-size: 1.6em; margin-top: -0.2em;">
                <span>{{ currentTime }}</span>
            </div>

            <div style="flex: 1;" />
            <!-- <div style="font-size: 1.6em; font-family: 'Arial'; margin-top: -1em;">
        <svg-icon icon-class="screen-weather" style="vertical-align: -0.1em; margin-right: 0.2em;" />
        <span>多云 32&#8451;</span>
      </div> -->
            <div style="font-size: 1.6em; font-family: BASE; margin-left: 2em; cursor: pointer; z-index: 99; margin-top: -0.2em;">
                <!-- <span>{{ isFullScreen ? '退出全屏' : '全屏' }}</span> -->
            </div>

            <span style="font-size: 3.6em; text-align: center; position: absolute; left: 0; right: 0;letter-spacing: 0.06em;text-shadow: 0 0 6px #0095FF;margin-top:-0.8em;">加装电梯管理分析</span>

            <div class="screen-header-btns-wrapper">
                <div />
                <!-- <div class="screen-header-btn2 btn2-l" /> -->

                <el-button type="text"
                           class="screen-header-btn"
                           style="opacity: 0;"
                >
                    返回工作台
                </el-button>

                <el-button type="text"
                           class="screen-header-btn"
                           :class="{ active: currentScreen === 'CityScreen' }"
                           :style="`opacity:${canShowCity ? 1 : 0}`"
                           @click="handleScreenChange('CityScreen', '')"
                >
                    城市分析
                </el-button>

                <div />

                <el-button type="text"
                           class="screen-header-btn"
                           :class="{ active: currentScreen === 'DistrictScreen' }"
                           @click="handleScreenChange('DistrictScreen', '420102')"
                >
                    区域分析
                </el-button>

                <el-button type="text"
                           class="screen-header-btn"
                           :class="{ active: ['ProjectScreen', 'CustomerScreen', 'LeaseScreen', 'RevenueScreen'].includes(currentScreen) }"
                           @click="handleFullScreen"
                >
                    {{ isFullScreen ? '退出全屏' : '全屏' }}
                </el-button>

                <!-- <div class="screen-header-btn2 btn2-r" /> -->
                <div />
            </div>
        </div>

        <div class="screen-main">
            <ProjectInfo v-model:area-code="areaCode"
                         style="grid-area: a"
            />

            <centerMap style="grid-area: b"
                       :area-code="areaCode"
                       :out-area-code="outAreaCode"
                       :is-full-screen="isFullScreen"
                       @district-change="handleDistrictChange"
                       @map-list-change="mapListChange"
            />

            <statisticsChart v-model:area-code="areaCode"
                             v-model:mapList="mapList"
                             style="grid-area: c"
            />

            <trendChart v-model:area-code="areaCode"
                        style="grid-area: d"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
@media screen and (max-height: 800px) {
    .screen {
        font-size: 8px;
    }
}

@media screen and (min-height: 801px) and (max-height: 900px) {
    .screen {
        font-size: 9px;
    }
}

@media screen and (min-height: 901px) and (max-height: 1000px) {
    .screen {
        font-size: 10px;
    }
}

@media screen and (min-height: 1001px) and (max-height: 1080px) {
    .screen {
        font-size: 12px;
    }
}

@media screen and (min-height: 1081px) and (max-height: 1200px) {
    .screen {
        font-size: 11px;
    }
}

@media screen and (device-aspect-ratio: 16/10) and (min-height: 1001px) {
    .screen {
        font-size: 11px;
    }
}

@media screen and (device-aspect-ratio: 14/9) and (min-height: 901px) {
    .screen {
        font-size: 10px;
    }
}

@media screen and (device-aspect-ratio: 144/90) and (min-height: 901px) {
    .screen {
        font-size: 10px;
    }
}

@media screen and (device-aspect-ratio: 4/3) {
    .screen {
        font-size: 8px;
    }
}

@media screen and (device-aspect-ratio: 3/2) {
    .screen {
        font-size: 8px;
    }
}

.screen {
    padding-bottom: 2em;
    font-family: ZhanKuQingKeHuangYouTi, BASE;
    color: white;
    background-image: url('@/assets/images/screen-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    user-select: none;
    min-height: 100vh;

    .screen-header {
        height: 8em;
        padding: 0 2.8em;
        font-family: ZhanKuQingKeHuangYouTi, YouSheBiaoTiHei;
        background-image: url('@/assets/images/screen-header-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: 0 -10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        // min-width: 80%;
        // overflow: auto;

        .screen-header-btns-wrapper {
            position: absolute;
            left: 0;
            right: 0;
            display: grid;
            grid-template-columns: 1fr repeat(2, auto) 43% repeat(2, auto) 1fr;
            top: 2.6em;

            .screen-header-btn {
                box-sizing: border-box;
                font-family: YouSheBiaoTiHei;
                color: white;
                // font-size: 100%;
                font-size: 1.3em;
                width: 11.4em;
                height: 2.4em;
                margin-left: 0;
                padding: 0.6em 0;

                :deep(span) {
                    font-size: 1.6em;
                }

                &:nth-child(2),
                &:nth-child(3) {
                    background-image: url('@/assets/images/screen-header-btn-l.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    &:hover,
                    &.active {
                        background-image: url('@/assets/images/screen-header-btn-la.png');
                    }
                }

                &:nth-last-child(2),
                &:nth-last-child(3) {
                    background-image: url('@/assets/images/screen-header-btn-r.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    &:hover,
                    &.active {
                        background-image: url('@/assets/images/screen-header-btn-ra.png');
                    }
                }
            }

            .screen-header-btn2 {
                width: 18em;
                height: 1.6em;
                background-size: 100% 100%;
                background-repeat: no-repeat;
            }

            .btn2-l {
                background-image: url('@/assets/images/screen-header-btn-l2.png');
            }

            .btn2-r {
                background-image: url('@/assets/images/screen-header-btn-r2.png');
            }
        }
    }

    // .screen-footer {
    //   height: 1.2em;
    //   background-image: url('@/assets/images/screen-footer-bg.png');
    //   background-size: 100% 100%;
    //   background-repeat: no-repeat;
    // }
}

:deep(.screen-main) {
    height: calc(100% - 12em);
    // min-width: 90%;
    // overflow: auto;
    display: grid;
    gap: 1em;
    margin-top: -0.8em;
    grid-template-columns: 25% repeat(2, 1fr) 25%;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        'a b b c'
        'd d d d';

    .title {
        height: 4.2em;
        background-image: url('@/assets/images/screen-title-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;

        > span:first-child {
            font-size: 1.8em;
            font-family: YouSheBiaoTiHei, BASE;
            color: white;
            position: absolute;
            top: 20%;
            left: 1.6em;
        }
    }

    .content,
    .chart-content {
        background: rgb(0 30 67 / 70%);
    }
}
</style>
